<template>
  <div>
      <el-container>
          <el-header>
            <!-- 分三部分  第一部分logo -->
            <div class="logo">
              <img src="../assets/logoo.jpg" alt="">
            </div>
            <!-- 中间内容部分 -->
            <div class="advert">
              <img src="../assets/wenzi.jpg" alt="">
            </div>
            <!-- user部分 -->
            <div class="user">
               欢迎<b>{{getCookie('adminname')}}</b>的到来！
               <el-button type="danger" @click="logout">注销</el-button>
            </div>
          </el-header>
          <!-- 左侧开始 -->
            <el-container>
              <el-aside width="200px">
                <el-row class="tac">
                    <el-col :span="12">
                      <!-- 默认展开的是 auths[0]._id  :router="true" 跳转路径-->
                      <el-menu
                        default-active="0"
                        class="el-menu-vertical-demo"
                        :router="true"
                        >
                        <!-- 遍历权限  index 唯一标识-->
                        <el-submenu v-for="(auth,index) in auths" :key="auth._id" :index="''+index"
                        v-if="auth.isShow">
                          <template slot="title">
                            <i :class="auth.icon"></i>
                            <span>{{auth.name}}</span>
                          </template>
                          <!-- 有子权限也需要遍历  给子加:index="son.path"-->
                          <el-menu-item v-for="son in auth.children" :key="son._id" v-if="son.isShow" :index="son.path">
                            <!-- 判断子权限显示与不显示 -->
                            <template slot="title" >{{son.name}}</template>
                          </el-menu-item>
                        </el-submenu>
                      </el-menu>
                    </el-col>
                </el-row>
              </el-aside>
              <el-container>
                <!-- 右边加路由出口 -->
                <el-main>
                  <router-view></router-view>
                </el-main>
                <!-- 底部 -->
                <el-footer></el-footer>
              </el-container>
            </el-container>
      </el-container> 
  </div>
</template>

<script>
//导入cookie
import {getCookie,removeCookie} from '@/utils/cookie.js'
//导入权限  统计数据
import {AuthList,countData} from '@/request'
export default {
  data () {
    return {
        //存储数据  谁登录显示谁的权限
        //获取到的是字符串 需要转数组 判断有就转 没有就是空数组
        auths: sessionStorage.getItem('auths')? JSON.parse(sessionStorage.getItem('auths')) : []
        
       }
    },
  methods: {
        //模板中要用将他放在这
        getCookie,
        //点注销执行的代码
        logout() {
          this.$confirm('你真的要残忍离开吗?', '提示', {
              confirmButtonText: '残忍离开',
              cancelButtonText: '心软留下',
              type: 'warning'
          }).then(() => {
            //删除cookie 本地存储 token令牌
            removeCookie('adminname')
            removeCookie('userId')
            localStorage.removeItem('adminToken')
            sessionStorage.removeItem('auths')
              this.$message({
                type: 'success',
                message: '退出成功!',
                duration:1500,
                //跳转到登录
                onClose: () =>{
                  this.$router.push('/login')
                }
              });
          }).catch(() => {
              this.$message({
                type: 'info',
                message: '已留下'
              });          
          });
        },
        //左侧方法
        handleOpen(key, keyPath) {
              console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
              console.log(key, keyPath);
        },
        // async getCountData() {
        //   let data = await countData()
        //   console.log(data);
        // }
    },
   async created(){
    //此时缺少身份验证-- 发请求之前添加请求头 在axios配置拦截器中
    //  let data=await AuthList()
    //  console.log(data);
     //请求回来的数据赋值给auths - 有数据就可以发请求了
     //谁登录显示谁的权限
    //  this.auths = data.data.authlist

     //悄悄发送请求 - 验证是否真的登录过了  验证token
    //  this.getCountData()
    }
}
</script>

<style lang='scss' scoped>
  .el-header{
     height: 100px !important;
    //  background-color: darkseagreen;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .el-aside{
    //  background-color: indianred;
     height: 639px;
   }
   .el-main{
    //  background-color:mediumvioletred;
    // background-image: url();
    background-image: url(../assets/1.jpeg);
    // background-repeat: no-repeat;
    // width: 100%;
   }
   .el-footer{
    //  background-color:cyan;
   }
   .logo img,.advert img{
    height: 100px;
    width: 350px;
   }
   .user b{
    margin: 0 10px;
    font-size: 20px;
    color: #0f0;
   }
   .el-col-12{
    width: 100%;
   }
</style>
